<template>
  <nav class="navbar">
    <div class="container">
      <div class="navbar-content">
        <!-- Logo -->
        <div class="navbar-brand">
          <router-link to="/" class="brand-link">
            <el-icon size="32" color="#FF8C00">
              <Shop />
            </el-icon>
            <span class="brand-text">宠物商城</span>
          </router-link>
        </div>

        <!-- 桌面端菜单 -->
        <div class="navbar-menu desktop-menu">
          <router-link to="/" class="nav-link" active-class="active">
            <el-icon><House /></el-icon>
            首页
          </router-link>
          <router-link 
            to="/products" 
            class="nav-link" 
            :class="{ active: $route.path === '/products' && !$route.query.sort }"
          >
            <el-icon><Grid /></el-icon>
            商品列表
          </router-link>
          <router-link 
            to="/products?sort=popular" 
            class="nav-link" 
            :class="{ active: $route.path === '/products' && $route.query.sort === 'popular' }"
          >
            <el-icon><Star /></el-icon>
            热门商品
          </router-link>
          <router-link to="/brands" class="nav-link" active-class="active">
            <el-icon><Trophy /></el-icon>
            品牌专区
          </router-link>
          <router-link to="/about" class="nav-link" active-class="active">
            <el-icon><InfoFilled /></el-icon>
            关于我们
          </router-link>
          <router-link to="/service" class="nav-link" active-class="active">
            <el-icon><Service /></el-icon>
            服务中心
          </router-link>
        </div>

        <!-- 购物车和移动端菜单按钮 -->
        <div class="navbar-actions">
          <!-- 购物车 -->
          <router-link to="/cart" class="cart-link">
            <el-badge :value="cartItemCount" :hidden="cartItemCount === 0">
              <el-button type="primary" :icon="ShoppingCart" circle />
            </el-badge>
          </router-link>

          <!-- 移动端菜单按钮 -->
          <el-button 
            class="mobile-menu-btn"
            :icon="Menu" 
            @click="toggleMobileMenu"
            circle
          />
        </div>
      </div>

      <!-- 移动端菜单 -->
      <div v-show="showMobileMenu" class="mobile-menu">
        <router-link to="/" class="mobile-nav-link" @click="closeMobileMenu">
          <el-icon><House /></el-icon>
          首页
        </router-link>
        <router-link 
          to="/products" 
          class="mobile-nav-link" 
          :class="{ active: $route.path === '/products' && !$route.query.sort }"
          @click="closeMobileMenu"
        >
          <el-icon><Grid /></el-icon>
          商品列表
        </router-link>
        <router-link 
          to="/products?sort=popular" 
          class="mobile-nav-link" 
          :class="{ active: $route.path === '/products' && $route.query.sort === 'popular' }"
          @click="closeMobileMenu"
        >
          <el-icon><Star /></el-icon>
          热门商品
        </router-link>
        <router-link to="/brands" class="mobile-nav-link" @click="closeMobileMenu">
          <el-icon><Trophy /></el-icon>
          品牌专区
        </router-link>
        <router-link to="/about" class="mobile-nav-link" @click="closeMobileMenu">
          <el-icon><InfoFilled /></el-icon>
          关于我们
        </router-link>
        <router-link to="/service" class="mobile-nav-link" @click="closeMobileMenu">
          <el-icon><Service /></el-icon>
          服务中心
        </router-link>
        <router-link to="/cart" class="mobile-nav-link" @click="closeMobileMenu">
          <el-icon><ShoppingCart /></el-icon>
          购物车
        </router-link>
      </div>
    </div>
  </nav>
</template>

<script>
import { ref, computed } from 'vue'
import { store } from '@/store'
import { 
  Shop, 
  House, 
  Grid, 
  ShoppingCart, 
  Menu,
  Star,
  Trophy,
  InfoFilled,
  Service
} from '@element-plus/icons-vue'

export default {
  name: 'NavigationBar',
  components: {
    Shop,
    House,
    Grid,
    ShoppingCart,
    Menu,
    Star,
    Trophy,
    InfoFilled,
    Service
  },
  setup() {
    const showMobileMenu = ref(false)
    
    const cartItemCount = computed(() => {
      return store.getCartItemCount()
    })
    
    const toggleMobileMenu = () => {
      showMobileMenu.value = !showMobileMenu.value
    }
    
    const closeMobileMenu = () => {
      showMobileMenu.value = false
    }
    
    return {
      showMobileMenu,
      cartItemCount,
      toggleMobileMenu,
      closeMobileMenu,
      // Element Plus icons
      Shop,
      House,
      Grid,
      ShoppingCart,
      Menu,
      Star,
      Trophy,
      InfoFilled,
      Service
    }
  }
}
</script>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.navbar-brand .brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
}

.brand-text {
  margin-left: 8px;
  font-size: 20px;
  font-weight: bold;
  color: #FF8C00;
}

.desktop-menu {
  display: flex;
  gap: 30px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  text-decoration: none;
  color: #666;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #FF8C00;
  background-color: #f0f9ff;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cart-link {
  text-decoration: none;
}

.mobile-menu-btn {
  display: none;
}

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 20px 0;
  animation: slideDown 0.3s ease;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  text-decoration: none;
  color: #666;
  border-bottom: 1px solid #f5f5f5;
}

.mobile-nav-link:hover {
  color: #FF8C00;
  background-color: #f0f9ff;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar {
    height: 70px;
  }
  
  .navbar-content {
    height: 70px;
  }
  
  .desktop-menu {
    display: none;
  }
  
  .mobile-menu-btn {
    display: inline-flex;
  }
  
  .brand-text {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .navbar-actions {
    gap: 10px;
  }
  
  .brand-text {
    display: none;
  }
}
</style>
